import React from 'react';
import './BlockFooter.css';
import { Row, Col, Slider, InputNumber } from 'antd';

export default function BlockFooter(props) {
  return (
    <div className={ "block-footer" + (props.className? (" " + props.className): "" ) } style={ props.style? ({ ...props.style }): ({}) }>
      <div className="footer-left">{ props.left }</div>
      <div className="footer-right">{ props.right }</div>
      <div className="footer-main">
        <div className="footer-main-center">
        <Row>
          <Col span={12}>
            <Slider
              min={16}
              max={40}
              onChange={props.onChange}
              value={typeof props.fontSize === 'number' ? props.fontSize : 0}
            />
          </Col>
          <Col span={5}>
            <InputNumber
              min={16}
              max={40}
              style={{ width: 55, color: '#000' }}
              value={props.fontSize}
              onChange={props.onChange}
            />
          </Col>
          <Col span={2}>
            <span>px</span>
          </Col>
          </Row>
        </div>
      </div>
    </div>
  );
}
